<template>
  <div class="app-container">
    <div class="wise-crud">
      <div class="table-show">
        <div class="operation-block">
          <el-row class="oper-btn" :gutter="10">
            <el-col :span="16">
              <el-button
                type="primary"
                @click="handleAdd()"
              ><i class="el-icon-plus" />添加</el-button>
            </el-col>
          </el-row>
        </div>
        <!--table-->
        <el-table
          :key="symbolKey"
          :data="tableData"
          border
          highlight-current-row
          row-key="id"
          lazy
          :load="load"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            label="序号"
            type="index"
            width="100"
          />
          <el-table-column label="岗位名称" prop="name" />
          <el-table-column label="所属企业">
            <template slot-scope="scope">
              {{ scope.row.spaceInfo ? scope.row.spaceInfo.name : "" }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.actions')"
            align="center"
            width="250"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.level === 1"
                size="mini"
                type="info"
                @click="handleView(scope.row)"
              >{{ $t("table.see") }}</el-button>
              <el-button
                v-if="scope.row.level === 1"
                size="mini"
                type="success"
                @click="handleEdit(scope.row)"
              >{{ $t("table.edit") }}</el-button>
              <el-button
                v-if="scope.row.level === 1"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >{{ $t("table.delete") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-block">
          <pagination
            :background="true"
            layout="total,prev, pager, next"
            :total="ts"
            :page.sync="page.p"
            :limit.sync="page.ps"
            @pagination="getTableData"
          />
        </div>
      </div>
      <el-dialog
        ref="drawer"
        :title="title"
        :visible.sync="drawer"
        append-to-body
        destroy-on-close
      >
        <div v-if="drawer" class="draw-body">
          <wise-form
            :columns="formItems"
            :loading="loading"
            :old-object="object"
            @on-submit="submitHandle"
          />
        </div>
      </el-dialog>
      <el-dialog
        ref="viewDrawer"
        title="查看"
        :visible.sync="viewDrawer"
        append-to-body
        close-on-press-escape
        destroy-on-close
      >
        <div class="draw-body">
          <wise-view :columns="viewItems" :object="object" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import checkPermission from '@/pages/index/utils/permission'
import WiseForm from '@/components/Crud/Form/wiseForm'
import WiseView from '@/components/Crud/View/wiseView'
import Pagination from '@/components/Pagination/index'
import { postHandle } from '@/api'
export default {
  name: 'PositionManage',
  components: { Pagination, WiseView, WiseForm },
  data() {
    return {
      urls: {
        list: '/api/v1/welder-uac-second/base-profession-comb/list',
        add: '/api/v1/welder-uac-second/base-profession-comb/create-profession',
        show: '/api/v1/welder-uac-second/base-profession-comb/show/',
        update: '/api/v1/welder-uac-second/base-profession-comb/update-profession/',
        delete: '/api/v1/welder-uac-second/base-profession-comb/remove-profession/'
      },
      symbolKey: '',
      object: {},
      loading: false,
      tableData: [],
      formItems: [],
      viewItems: [],
      drawer: false,
      title: '',
      viewDrawer: false,
      ts: 0,
      page: {
        p: 1,
        ps: 20
      }
    }
  },
  computed: {
    handle() {
      return ['add']
    },
    fields() {
      let arr = [{ label: '序号', type: 'index', use: ['table'] }]
      arr.push(
        {
          label: '岗位名称',
          prop: 'name',
          type: 'text',
          labelWidth: '130px',
          rules: [
            { required: true, message: '请输入岗位名称', trigger: 'change' }
          ],
          placeholder: '请输入岗位名称',
          use: ['add', 'view', 'edit']
        },

        {
          prop: 'spaceInfo',
          label: '所属企业',
          labelWidth: '130px',
          type: 'render',
          viewRender: (h, item, object) => {
            return h('div', object.spaceInfo ? object.spaceInfo.name : '')
          },
          use: ['view']
        },
        {
          label: '所属企业',
          prop: 'entSpaceObj',
          type: 'select',
          labelWidth: '130px',
          url: '/api/v1/welder-sbtx-second/enterprise-comb/list',
          labelKey: 'name',
          valueKey: 'spaceId',
          objKeys: [
            {
              field: 'spaceId',
              operator: 'EQUALS',
              key: 'spaceId'
            }
          ],
          rules: [{ required: true, message: '请选择企业', trigger: 'change' }],
          use: ['add', 'edit']
        }
      )
      return arr
    }
  },
  mounted() {
    this.getTableData()
   
  },
  methods: {
 
    checkPermission,
    setFromItem(hanlde) {
      this.formItems = []
      if (this.fields && this.fields.length > 0) {
        this.fields.forEach((item) => {
          if (item.use.indexOf(hanlde) !== -1) {
            this.formItems.push({
              label: item.label,
              type: item.type,
              prop: item.prop,
              dataDic: item.dataDic,
              labelWidth: item.labelWidth,
              rules: item.rules,
              url: item.url,
              render: item.formRender,
              labelKey: item.labelKey,
              valueKey: item.valueKey,
              objKeys: item.objKeys,
              maxlength: item.maxlength,
              placeholder: item.placeholder
            })
          }
        })
      }
    },
    setViewItem() {
      this.viewItems = []
      if (this.fields && this.fields.length > 0) {
        this.fields.forEach((item) => {
          if (item.use.indexOf('view') !== -1) {
            this.viewItems.push({
              label: item.label,
              type: item.type,
              prop: item.prop,
              render: item.viewRender,
              labelWidth: item.labelWidth,
              dataDic: item.dataDic
            })
          }
        })
      }
    },
    handleAdd() {
      this.setFromItem('add')
      this.title = '新增'
      this.drawer = true
    },
    handleEdit(row) {
      this.setFromItem('edit')
      this.title = '编辑'
      this.getObjectById(row.id)
      this.drawer = true
    },
    handleView(row) {
      this.setViewItem()
      this.getObjectById(row.id)
      this.viewDrawer = true
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteObjectById(row.id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    submitHandle(obj) {
      this.loading = true
      let url = this.urls.add
      if (obj.id) {
        url = this.urls.update + obj.id
      }
      postHandle(url, { obj })
        .then((response) => {
          this.$message('操作成功')
          this.loading = false
          this.drawer = false
          this.page.p = 1
          this.getTableData()
        })
        .catch((error) => {
          console.error(error)
          this.loading = false
          this.$message.error('操作失败')
        })
    },
    getObjectById(id) {
      postHandle(this.urls.show + id, {}).then((response) => {
        this.object = response.result
      })
    },
    deleteObjectById(id) {
      postHandle(this.urls.delete + id, {})
        .then((response) => {
          this.getTableData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch((error) => {
          console.error(error)
          this.$message.error('操作失败')
        })
    },
    getTableData() {
      const req = {
        d: {
          filters: [
            {
              field: 'level',
              operator: 'EQUALS',
              value: 1
            }
          ],
          page: this.page,
          retPage: true
        }
      }
      postHandle(this.urls.list, req).then((response) => {
        const data = response.result
        this.tableData = data
        this.ts = response.page.ts
        this.symbolKey = Symbol(new Date().toString())
      })
    },
    load(tree, treeNode, resolve) {
      console.log(tree, treeNode)
      const req = {
        d: {
          filters: [{ field: 'pid', operator: 'EQUALS', value: tree.id }],
          page: {
            p: 1,
            ps: 9999
          }
        }
      }
      postHandle(this.urls.list, req).then((response) => {
        const data = response.result
        resolve(data)
      })
    }
  }
}
</script>

<style scoped>
</style>
